/**
* 功能描述: 列表穿梭框demo
* @author 崔孝楠
* @date 2022/9/30 14:53
* @version 1.0
*/
<template>
  <div class="yw-transfer yw-list-transfer">
    <!-- source框 -->
    <div class="yw-transfer-list">
      <div class="yw-transfer-list-header">
        <!-- 选项前的复选框 -->
        <label class="yw-checkbox-wrapper yw-checkbox-wrapper-indeterminate">
          <span class="yw-checkbox">
            <input type="checkbox" class="yw-checkbox-input">
            <span class="yw-checkbox-inner"></span>
          </span>
        </label>
        <!-- 下拉图标 -->
        <span class="yw-transfer-list-header-dropdown">
          <svg focusable="false" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
            <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
          </svg>
        </span>
        <!-- 选项数量 -->
        <span>8 项</span>
        <!-- title名 -->
        <span class="yw-transfer-list-header-title">Source</span>
      </div>
      <!-- 搜索框 -->
      <div class="yw-transfer-list-search-wrapper">
        <span class="yw-input-affix-wrapper" >
          <!-- 前缀 -->
          <span class="yw-input-prefix">
            <svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
                <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
            </svg>
          </span>
          <input class="yw-input" placeholder="请输入搜索内容" />
          <!-- 清空按钮 -->
          <span class="yw-input-suffix">
            <svg class="icon yw-input-clear-icon yw-input-clear-icon-show yw-input-clear-icon-has-suffix" t="1664244275793" viewBox="0 0 1024 1024" p-id="2691">
              <path d="M512 128C300.8 128 128 300.8 128 512s172.8 384 384 384 384-172.8 384-384S723.2 128 512 128zM512 832c-179.2 0-320-140.8-320-320s140.8-320 320-320 320 140.8 320 320S691.2 832 512 832z" p-id="2692"></path>
              <path d="M672 352c-12.8-12.8-32-12.8-44.8 0L512 467.2 396.8 352C384 339.2 364.8 339.2 352 352S339.2 384 352 396.8L467.2 512 352 627.2c-12.8 12.8-12.8 32 0 44.8s32 12.8 44.8 0L512 556.8l115.2 115.2c12.8 12.8 32 12.8 44.8 0s12.8-32 0-44.8L556.8 512l115.2-115.2C684.8 384 684.8 364.8 672 352z" p-id="2693"></path>
            </svg>
          </span>
        </span>
      </div>
      <!-- 选项内容 -->
      <ul class="yw-transfer-list-content">
        <!-- 选项 -->
        <li class="yw-transfer-list-content-item" v-for="index in [3,4,5,6,7,8,9,10]" :key="index">
          <!-- 选项前的复选框 -->
          <label class="yw-checkbox-wrapper">
            <span class="yw-checkbox">
              <input type="checkbox" class="yw-checkbox-input">
              <span class="yw-checkbox-inner"></span>
            </span>
          </label>
          <!-- 选项文本 -->
          <span class="yw-transfer-list-content-item-text">content{{ index }}-description of content{{ index }}</span>
        </li>
      </ul>
      <!-- footer -->
      <div class="yw-transfer-list-footer">
        <button class="yw-btn yw-btn-small" type="button">
          <span>操作</span>
        </button>
      </div>
    </div>

    <!-- 穿梭按钮 -->
    <div class="yw-transfer-operation">
      <button class="yw-btn yw-btn-primary" disabled>
        <svg focusable="false" class="" data-icon="right" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
          <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
        </svg>
      </button>
      <button class="yw-btn yw-btn-primary" disabled>
        <svg focusable="false" class="" data-icon="left" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
          <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
        </svg>
      </button>
    </div>

    <!-- target框 -->
    <div class="yw-transfer-list">
      <div class="yw-transfer-list-header">
        <!-- 选项前的复选框 -->
        <label class="yw-checkbox-wrapper yw-checkbox-wrapper-indeterminate">
          <span class="yw-checkbox">
            <input type="checkbox" class="yw-checkbox-input">
            <span class="yw-checkbox-inner"></span>
          </span>
        </label>
        <!-- 向下图标 -->
        <span class="yw-transfer-list-header-dropdown">
          <svg focusable="false" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
            <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
          </svg>
        </span>
        <!-- 选项数量 -->
        <span>2 项</span>
        <!-- title名 -->
        <span class="yw-transfer-list-header-title">Target</span>
      </div>
      <!-- 搜索框 -->
      <div class="yw-transfer-list-search-wrapper">
        <span class="yw-input-affix-wrapper" >
          <!-- 前缀 -->
          <span class="yw-input-prefix">
            <svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
                <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
            </svg>
          </span>
          <input class="yw-input" placeholder="请输入搜索内容" />
          <!-- 清空按钮 -->
          <span class="yw-input-suffix">
            <svg class="icon yw-input-clear-icon yw-input-clear-icon-show yw-input-clear-icon-has-suffix" t="1664244275793" viewBox="0 0 1024 1024" p-id="2691">
              <path d="M512 128C300.8 128 128 300.8 128 512s172.8 384 384 384 384-172.8 384-384S723.2 128 512 128zM512 832c-179.2 0-320-140.8-320-320s140.8-320 320-320 320 140.8 320 320S691.2 832 512 832z" p-id="2692"></path>
              <path d="M672 352c-12.8-12.8-32-12.8-44.8 0L512 467.2 396.8 352C384 339.2 364.8 339.2 352 352S339.2 384 352 396.8L467.2 512 352 627.2c-12.8 12.8-12.8 32 0 44.8s32 12.8 44.8 0L512 556.8l115.2 115.2c12.8 12.8 32 12.8 44.8 0s12.8-32 0-44.8L556.8 512l115.2-115.2C684.8 384 684.8 364.8 672 352z" p-id="2693"></path>
            </svg>
          </span>
        </span>
      </div>
      <!-- 选项内容 -->
      <ul class="yw-transfer-list-content">
        <li class="yw-transfer-list-content-item" v-for="index in [1, 2]" :key="index">
          <!-- 选项前的复选框 -->
          <label class="yw-checkbox-wrapper">
            <span class="yw-checkbox">
              <input type="checkbox" class="yw-checkbox-input">
              <span class="yw-checkbox-inner"></span>
            </span>
          </label>
          <!-- 选项文本 -->
          <span class="yw-transfer-list-content-item-text">content{{ index }}-description of content{{ index }}</span>
        </li>
      </ul>
      <!-- footer -->
      <div class="yw-transfer-list-footer">
        <button class="yw-btn yw-btn-small" type="button">
          <span>操作</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>

</style>
